<template>
  <div class="box">
    <!-- 左上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="传感器概括"
    >
      <div slot="tab" class="MainCoal-box-tab">
        <div
          v-for="(item, i) in titletab"
          :key="i"
          :class="['btn', isbtn === item ? 'isbtn' : '']"
          @click="clickTitleTab(item)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 传感器概括 统计 -->
      <div :slot="count" class="MainCoal-box-content">
        <!-- 传感器数量 -->
        <div class="sensorSum">
          <p class="sum">
            <img
              src="../../../../src/assets/img/monitor/icon-1.png"
              alt=""
            />传感器数量
          </p>
          <p>
            <span class="num" style="color: rgba(0, 253, 255, 100)">{{sensorNum}}</span
            ><span class="piece">个</span>
          </p>
        </div>
        <!-- 正常 异常 -->
        <div class="sensorState">
          <div class="normal">
            <p class="sum">
              <span style="background-color: rgba(87, 255, 170, 100)"></span
              >正常
            </p>
            <p>
              <span class="num" style="color: rgba(87, 255, 170, 100)">{{normalSensorNum}}</span
              ><span class="piece">个</span>
            </p>
          </div>
          <div class="odd">
            <p class="sum">
              <span style="background-color: rgba(239, 48, 59, 100)"></span>异常
            </p>
            <p>
              <span class="num" style="color: rgba(239, 48, 59, 100)">{{anomalySensorNum}}</span
              ><span class="piece">个</span>
            </p>
          </div>
        </div>
        <p
          style="
            color: rgba(173, 173, 173, 100);
            font-size: 12px;
            margin-bottom: 0.625rem;
          "
        >
          传感器分类统计
        </p>
        <!-- 传感器分类统计  图表 -->
        <div class="sensorSort">
          <div class="chat">
            <DashBoardChart
              :data= dataRate
              text="正常率"
              :src="require('@/assets/img/monitor/icon-1.png')"
            />
          </div>
        </div>
        <p
          style="
            color: rgba(173, 173, 173, 100);
            font-size: 12px;
            margin-bottom: 0.625rem;
          "
        >
          传感器类型统计
        </p>
        <!-- 正常率 图表 -->
        <div class="normalRate">
          <div class="chat">
            <RoseChart :data="cateLists" :color="colorCat" />
          </div>
          <div class="right">
            <div v-for="(v, cateLists) in cateLists" :key="cateLists">
              <p class="title">
                <span
                  class="square"
                  :style="`backgroundColor: ${v.color};`"
                ></span
                >{{ v.x }}
              </p>
              <p class="chatnum">{{ v.y }}<span class="piece">次</span></p>
            </div>
          </div>
        </div>
      </div>
      <!-- 传感器概括  列表 -->
      <div :slot="list" class="MainCoal-box-content">
        <div class="search-wrap">
          <HerinSelect
            v-model="selectType"
            class="herin-select"
            :options="selectOption"
            place-holder=""
            :height="28"
            :width="160"
            @HerinSelectChange="handleSelectChange"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
          <div
            class="input-box"
            style="background-color: rgba(255, 255, 255, 0.05)"
          >
            <input v-model="searchInput" type="text" placeholder="搜索..." />
            <i
              v-show="searchInput"
              class="el-icon el-icon-close"
              @click="clearInput"
            />
            <i class="el-icon el-icon-search" @click="handleSearch" />
          </div>
        </div>
        <div style="height: 410px; overflow: auto" class="sensorBox">
          <template v-if="sensorList1.length>0">
            <div
              class="sensorList"
              v-for="(v, sensorListL) in sensorList1"
              :key="sensorListL"
              @click="sendMessage(sensorListL)"
              :style="
                minepressure === sensorListL
                  ? 'backgroundColor:rgba(255, 255, 255, .2)'
                  : ''
              "
            >
              <p class="title">{{ v.stationNo }}</p>
              <div class="more">
                <p class="workingF">
                  <img src="@/assets/img/monitor/icon-6.png" alt="" />{{ v.stationLocation }}
                </p>
                <p>
                  <span
                    :style="{
                      color: statusColor(v.stationStatus).color,
                      'background-color': statusColor(v.stationStatus).bgcolor,
                    }"
                    >{{ v.stationStatus }}</span
                  >
                </p>
              </div>
            </div>
          </template>
          <div v-else class="isCommonLists">暂无数据</div>
        </div>
      </div>
    </HerinContainer>
    <!-- 左下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="传感器断电断线监测"
      style="height: 463px"
    >
      <div slot="tab" class="MainCoal-box-tab">
        <div
          v-for="(item, ind) in titleTwotab"
          :key="ind"
          :class="['btn', isTwobtn === item ? 'isbtn' : '']"
          @click="clickTwoTitleTab(item)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 传感器断电断线检测 统计 -->
      <div :slot="Twocount" class="MainCoal-box-content">
        <!-- 断电数量 断线数量 -->
        <div class="broken">
          <div>
            <span class="title">今日断电</span>
            <span><span class="num">{{ blackoutNum }}</span><span class="piece">次</span></span>
          </div>
          <div>
            <span class="title">今日断线</span>
            <span><span class="num">{{ breakLineNum }}</span><span class="piece">次</span></span>
          </div>
        </div>
        <div class="chartBroken">
          <div class="charttitle">近24小时断电监测</div>
          <div class="line" />
          <div />
        </div>
        <div class="outage">
          <LineChart
            :chartData="blackoutList"
            :text="['断电']"
            :area="true"
            unit="次"
            :color="['#EF303B']"
          />
        </div>
        <div class="chartBroken">
          <div class="charttitle">近24小时断线监测</div>
          <div class="line" />
          <div />
        </div>
        <div class="outage">
          <LineChart
            :chartData="breakLineList"
            :text="['断线']"
            :area="true"
            unit="次"
            :color="['#F39729']"
          />
        </div>
      </div>
      <!-- 传感器概括  列表 -->
      <div :slot="Twolist" class="MainCoal-box-content">
        <div class="search-wrap">
          <HerinSelect
            v-model="outageSelect"
            class="herin-select"
            :options="selectOption"
            place-holder=""
            :height="28"
            :width="160"
            :showOptionscount="4"
            @HerinSelectChange="outageChange"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
          <div
            class="input-box"
            style="background-color: rgba(255, 255, 255, 0.05)"
          >
            <input v-model="outageInput" type="text" placeholder="搜索..." />
            <i
              v-show="outageInput"
              class="el-icon el-icon-close"
              @click="IconoutageFun"
            />
            <i class="el-icon el-icon-search" @click="outageSearch" />
          </div>
        </div>
        <div
          v-if="sensorDX.length > 0"
          class="sensorBox sensorBox-two"
          style="height: 360px; overflow: auto; padding-right: 0.625rem"
        >
          <div
            class="sensorList"
            v-for="(v, sensorDX) in sensorDX"
            :key="sensorDX"
          >
            <div class="sensorList-two">
              <p class="title">{{ v.stationNo }}</p>
              <p
                class="type"
                :style="{
                    color: statusColorV2(v.exceptType).color,
                    'background-color': statusColorV2(v.exceptType).bgcolor,
                  }"> {{ v.exceptType }} </p>
            </div>
            <div class="more">
              <p class="workingF">
                <img src="@/assets/img/monitor/icon-6.png" alt="" />
                <span class="overflow-ellipsis">{{ v.stationLocation }}</span>
              </p>
              <p class="createTime">{{v.createTime}}</p>
            </div>
          </div>
        </div>
        <div v-else class="isCommonLists">暂无数据</div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
import LineChart from '@/components/chart/line/LineChart.vue';
import DashBoardChart from '@/components/chart/pie/DashBoardChart.vue';
import RoseChart from '@/components/chart/pie/RoseChart.vue';

import { getAllArea, querySensorInfo, querySensorAbnormal } from '@/api/item/monitor/safety';
import { xFormat } from '@/utils/date';

export default {
  components: {
    HerinContainer,
    DashBoardChart,
    HerinSelect,
    LineChart,
    RoseChart
  },
  data() {
    return {
      selectOption: [
        {
          label: '全部传感器',
          value: '全部传感器' }
      ],
      selectType: '全部传感器',
      searchInput: '',
      outageSelect: '全部传感器',
      outageInput: '',
      cateLists: [
        { x: '水文传感器', y: 7, color: '#00FDFF' },
        { x: '瓦斯传感器', y: 22, color: '#5473E8' },
        { x: '矿压传感器', y: 18, color: '#4FD785' }
      ],
      colorCat: ['#00FDFF', '#5473E8', '#4FD785'],
      sensorDX: [],
      color: ['#40D965', '#4D9B7D'],
      count: 'content',
      list: '',
      titletab: ['统计', '列表'],
      isbtn: '统计',
      Twocount: 'content',
      Twolist: '',
      titleTwotab: ['统计', '列表'],
      isTwobtn: '统计',
      sensorList1: [],
      breakLineList: [],
      breakLineNum: 0,
      blackoutList: [],
      blackoutNum: 0,
      sensorNum: '',
      accuracy: '',
      normalSensorNum: '',
      anomalySensorNum: '',
      actionLoopTimer3S: '',
      actionLoopTimer1H: ''
    };
  },
  computed: {
    minepressure() {
      return this.$store.state.minepressure;
    },
    statusColor() {
      return function(status) {
        const info = {};
        switch (status) {
          case '正常':
            info.color = '#57FFAA';
            info.bgcolor = 'rgba(87,255,170,0.3)';
            break;
          case '超限报警':
            info.color = '#FFD101';
            info.bgcolor = 'rgba(255,209,1,0.3)';
            break;
          case '断电报警':
            info.color = '#FB9B2A';
            info.bgcolor = 'rgba(251,155,42,0.3)';
            break;
          case '标校':
            info.color = '#34C8FF';
            info.bgcolor = 'rgba(52,200,255,0.3)';
            break;
          case '标校报警':
            info.color = '#864BFF';
            info.bgcolor = 'rgba(134,75,255,0.3)';
            break;
          case '超量程':
            info.color = '#6FFACB';
            info.bgcolor = 'rgba(111,250,203,0.3)';
            break;
          case '分站故障':
            info.color = '#FEFA83';
            info.bgcolor = 'rgba(254,250,131,0.3)';
            break;
          case '不巡检':
            info.color = '#B2F98C';
            info.bgcolor = 'rgba(178,249,140,0.3)';
            break;
          case '暂停':
            info.color = '#00FDFF';
            info.bgcolor = 'rgba(0,253,255,0.3)';
            break;
          case '传感器故障':
            info.color = '#EF303B';
            info.bgcolor = 'rgba(239,48,59,0.3)';
            break;
        }
        return info;
      };
    },
    statusColorV2() {
      return function(status) {
        const info = {};
        switch (status) {
          case '标校':
            info.color = '#00FDFF';
            info.bgcolor = 'rgba(0,253,255,0.3)';
            break;
          case '超量程':
            info.color = '#FFD101';
            info.bgcolor = 'rgba(255,209,1,0.3)';
            break;
          case '断电报警':
            info.color = '#FB9B2A';
            info.bgcolor = 'rgba(251,155,42,0.3)';
            break;
          case '基站不通':
            info.color = '#34C8FF';
            info.bgcolor = 'rgba(52,200,255,0.3)';
            break;
          case '超限报警':
            info.color = '#864BFF';
            info.bgcolor = 'rgba(134,75,255,0.3)';
            break;
          case '超下限预警':
            info.color = '#6FFACB';
            info.bgcolor = 'rgba(111,250,203,0.3)';
            break;
          case '馈电异常':
            info.color = '#FEFA83';
            info.bgcolor = 'rgba(254,250,131,0.3)';
            break;
          case '基站断电':
            info.color = '#B2F98C';
            info.bgcolor = 'rgba(178,249,140,0.3)';
            break;
          case '超上限预警':
            info.color = '#5087EC';
            info.bgcolor = 'rgba(80,135,236,0.3)';
            break;
          case '传感器断线':
            info.color = '#EF303B';
            info.bgcolor = 'rgba(239,48,59,0.3)';
            break;
        }
        return info;
      };
    },
    dataRate() {
      const str = this.accuracy.slice(0, -1);
      const y = str * 1 / 100;
      return [{ y }];
    }
  },
  mounted() {
    this.getAllArea();
    this.startActionLoop3S(this.all3SFun);
    this.startActionLoop1H(this.querySensorAbnormal);
  },
  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
    this.actionLoopTimer1H && clearInterval(this.actionLoopTimer1H);
    this.actionLoopTimer1H = null;
  },

  methods: {
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    // 每隔 1小时 循环查询
    startActionLoop1H(callback) {
      callback();
      // 3600000
      this.actionLoopTimer1H = setInterval(callback, 3600000);
    },
    all3SFun() {
      this.querySensorInfo();
      if (this.isTwobtn === '列表') {
        this.querySensorAbnormal();
      }
    },
    // 获取全部区域
    async getAllArea() {
      const res = await getAllArea();
      if (res.data.code === 200) {
        const data = res.data.data.map(item => {
          return {
            label: item,
            value: item
          };
        });
        this.selectOption = [...this.selectOption, ...data];
      }
    },

    // 传感器概况
    async querySensorInfo() {
      const params = {
        areaName: this.isbtn === '统计' ? '' : this.selectType === '全部传感器' ? '' : this.selectType,
        keyWard: this.searchInput,
        paramType: this.isbtn === '统计' ? 'Statistics' : 'List',
        sensorWarningType: ''
      };
      const res = await querySensorInfo(params);
      if (res.data.code === 200) {
        if (res.data.data.sensorList) {
          this.sensorList1 = res.data.data.sensorList;
        }
        const sensorStatistics = res.data.data.sensorStatistics;
        if (sensorStatistics) {
          this.sensorNum = sensorStatistics.sensorNum;
          this.accuracy = sensorStatistics.accuracy;
          this.normalSensorNum = sensorStatistics.normalSensorNum;
          this.anomalySensorNum = sensorStatistics.anomalySensorNum;
          const dataLists = [];
          dataLists.push(sensorStatistics.cosensorInfo);
          dataLists.push(sensorStatistics.gasSensorInfo);
          dataLists.push(sensorStatistics.temperatureSensorInfo);
          this.cateLists = dataLists.map(item => {
            return {
              x: item.sensorName,
              s: item.date,
              y: item.sensorNum * 1
            };
          });
        }
      }
    },
    // 点击传感器概括下拉菜单
    handleSelectChange() {
      this.searchInput = '';
      this.querySensorInfo();
    },
    // 点击传感器概括搜索按钮
    handleSearch() {
      this.querySensorInfo();
    },
    // 点击传感器概括清除搜索框
    clearInput() {
      this.searchInput = '';
      this.querySensorInfo();
    },

    // 获取断电断线列表数据
    async querySensorAbnormal() {
      const params = {
        areaName: this.isTwobtn === '统计' ? '' : this.outageSelect === '全部传感器' ? '' : this.outageSelect,
        keyWard: this.outageInput,
        paramType: this.isTwobtn === '统计' ? 'Statistics' : 'List',
        sensorWarningType: ''
      };
      const res = await querySensorAbnormal(params);
      if (res.data.code === 200) {
        const resInfo = res.data.data;
        if (resInfo.breakLineList) {
          this.breakLineList = resInfo.breakLineList.map(item => {
            return {
              x: xFormat(item.dataTime),
              y: item.faultNum * 1,
              s: item.faultName
            };
          });
        }
        this.breakLineNum = resInfo.breakLineNum;
        if (resInfo.outageList) {
          this.blackoutList = resInfo.outageList.map(item => {
            return {
              x: xFormat(item.dataTime),
              y: item.faultNum * 1,
              s: item.faultName
            };
          });
        }
        this.blackoutNum = resInfo.outageNum;
        if (resInfo.list !== null) {
          this.sensorDX = resInfo.list;
        }
      }
    },
    // 点击断电断线下拉菜单
    outageChange() {
      this.outageInput = '';
      this.querySensorAbnormal();
    },
    // 点击断电断线搜索按钮
    outageSearch() {
      this.querySensorAbnormal();
    },
    // 点击断电断线清除搜索框
    IconoutageFun() {
      this.outageInput = '';
      this.querySensorAbnormal();
    },
    // 点击标题内的tab并切换模拟数据
    clickTitleTab(item) {
      this.isbtn = item;
      if (item === '列表') {
        this.list = 'content';
        this.count = '';
      } else if (item === '统计') {
        this.list = '';
        this.count = 'content';
      }
      this.querySensorInfo();
    },
    // 点击传感器断电断线tab
    clickTwoTitleTab(item) {
      this.isTwobtn = item;
      if (item === '列表') {
        this.Twolist = 'content';
        this.Twocount = '';
      } else if (item === '统计') {
        this.Twolist = '';
        this.Twocount = 'content';
      }
      this.querySensorAbnormal();
    },

    sendMessage(id) {
      // 设置 minepressure 值
      this.$store.commit('setData', { name: 'minepressure', value: id });

      this.$store.dispatch('postToEngine', { sceneName: 'MINEPRESSURE', data: id });
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0 0.625rem;
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    img {
      width: 1rem;
      height: 1rem;
      margin: 0 0.75rem 0 0.3125rem;
    }
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .sensorState {
    margin: 0.625rem 0;
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    font-size: 14px;
    .normal,
    .odd {
      width: 160px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        margin: 0 0.625rem 0 0.9375rem;
      }
    }
  }
  .normalRate {
    width: 100%;
    height: 9.75rem;
    display: flex;
    justify-content: space-between;
    .chat {
      width: 8.875rem;
      height: 8.875rem;
    }
    .right {
      width: 10rem;
      height: 8.875rem;
      display: flex;
      flex-wrap: wrap;
      .square {
        display: inline-block;
        height: 0.625rem;
        width: 0.125rem;
        margin-right: 5px;
      }
      div {
        width: 50%;
        .title {
          color: rgba(173, 173, 173, 100);
          font-size: 12px;
          margin-top: 1.1875rem;
        }
        .chatnum {
          color: rgba(248, 248, 248, 100);
          font-size: 14px;
        }
      }
    }
  }
  .sensorSort {
    display: flex;
    justify-content: space-between;
    height: 140px;
    .chat {
      width: 8.75rem;
      height: 8.75rem;
      margin: 0 auto;
    }
    .right {
      p {
        margin: 1.5rem 0;
      }
      .point {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
      }
      .title {
        color: rgba(173, 173, 173, 100);
        font-size: 12px;
        margin: 0 0.75rem 0 0.375rem;
      }
      .num {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin-right: 0.3125rem;
      }
    }
  }
  .sensorBox {
    width: calc(100% + 10px);
    padding-right: 10px;
    .backColor {
      background-color: rgba(255, 255, 255, 0.3);
    }
    .sensorList:last-child {
      margin-bottom: 0;
    }
    .sensorList {
      img {
        width: 12px;
        height: 12px;
        // margin-right: 0.3125rem;
      }
      border-bottom: 0.0625rem solid rgba(173, 173, 173, 100);
      height: 3.5rem;
      margin-bottom: 5px;
      padding: 5px;
      .title {
        color: rgba(248, 248, 248, 100);
        font-size: 12px;
      }
      .more {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 16px;
        margin-top: 8px;
        .workingF {
          color: rgba(173, 173, 173, 100);
          font-size: 12px;
          display: inline-flex;
          align-items: center;
          span {
            font-size: .75rem;
            display: inline-block;
            line-height: 1rem;
          }
        }
      }
    }
  }

  .sensorBox-two{
    .sensorList-two{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .type{
        font-size: .75rem;
        padding: 0 .3125rem;
        text-align: center;
      }
    }
    .createTime{
      color: rgb(173, 173, 173);
      font-size: 12px;
    }
  }

  .outageList {
    width: calc(100% + 10px);
    .sensorList:last-child {
      margin-bottom: 0;
    }
    .sensorList {
      border-bottom: 0.0625rem solid rgba(173, 173, 173, 100);
      height: 3.5rem;
      margin-bottom: 10px;
      div {
        display: flex;
        justify-content: space-between;
        .title {
          color: rgba(248, 248, 248, 100);
          font-size: 12px;
        }
        span {
          font-size: 12px;
          display: inline-block;
          width: 2.1875rem;
          line-height: 16px;
          text-align: center;
          margin-left: 5px;
        }
      }

      .more {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        img {
          width: 12px;
          height: 12px;
          margin-right: 0.3125rem;
        }
        span {
          color: rgba(173, 173, 173, 100);
          font-size: 12px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .broken {
    height: 2.375rem;
    width: 20.625rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 10rem;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.625rem;
    }
    .title {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
    }
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
  }
  .chartBroken {
    display: flex;
    align-items: center;
    margin: 0.625rem 0;
    .charttitle {
      font-size: 0.75rem;
      color: $light2Grey;
      margin-right: 0.3125rem;
    }
    .line {
      flex: 1;
      height: 0.0625rem;
      border-bottom: 0.0625rem dashed $darkGrey;
    }
  }
  .outage {
    height: 8.8125rem;
    width: 100%;
  }
  .search-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.625rem;
    .input-box {
      width: 10rem;
      height: 1.75rem;
      border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
      border-radius: 0.25rem;
      position: relative;
      text-align: left;
      box-sizing: border-box;
      input {
        width: 72%;
        height: 100%;
        margin: 0 0.625rem;
        border: none;
        font-size: 0.75rem;
        color: rgba($color: $white, $alpha: 0.9);
        background-color: transparent;
        outline-width: 0rem;
      }
      input::-webkit-input-placeholder {
        font-size: 0.75rem;
        color: $secondaryTextColor;
      }
      .el-icon {
        display: inline-block;
        width: 0.875rem;
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.75rem;
        cursor: pointer;
        color: rgba($color: $white, $alpha: 0.5);
        position: absolute;
        top: 0.4375rem;
        &-close {
          right: 1.375rem;
        }
        &-search {
          right: 0.25rem;
          font-size: 0.75rem;
        }
      }
    }
  }
}
</style>
